<template>
  <div class="permission-box">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <!-- 许可信息 -->
        <div v-if="!isUpdate" class="main-box">
          <img
            class="info-img"
            src="@/assets/img/permission/permission-info.png"
          />
          <div class="title">
            {{ LANG.PERMISSION_MESSAGE }}
          </div>
          <!-- 许可ID -->
          <div class="input-box">
            <span class="input-label">{{ LANG.PERMISSION_ID }}</span>
            <div class="input-content">
              {{ tableData.extra.licenseCode }}
            </div>
          </div>
          <!-- 生效时间 -->
          <div class="input-box">
            <span class="input-label">{{ LANG.EFFECTIVE_TIME }}</span>
            <div class="input-content">
              {{ tableData.notBefore }}
            </div>
          </div>
          <!-- 过期时间 -->
          <div class="input-box">
            <span class="input-label">{{ LANG.EXPIRY_TIME }}</span>
            <div class="input-content">
              {{
                tableData.extra.isIgnoreTimeLimit
                  ? '不限制'
                  : tableData.notAfter
              }}
            </div>
          </div>
          <!-- 在线人数 -->
          <div class="input-box">
            <span class="input-label">{{ LANG.ONLINE_NUM }}</span>
            <div class="input-content">
              {{
                tableData.extra.isIgnorePeopleLimit
                  ? '不限制'
                  : tableData.extra.onlineNum
              }}
            </div>
          </div>
          <!-- 更新许可 -->
          <div class="btn-box1">
            <fks-button
              v-permission="['permission:update']"
              type="primary"
              icon="fks-icon-turn-right"
              @click="isUpdate = true"
            >
              <span>{{ LANG.UPDATE_LICENSE }}</span>
            </fks-button>
          </div>
        </div>
        <!-- 更新许可 -->
        <div v-if="isUpdate" class="main-box">
          <img
            class="info-img"
            src="@/assets/img/permission/permission-update.png"
          />
          <div class="title">
            {{ LANG.UPLOAD_LICENSE }}
          </div>
          <div class="update-box">
            <fks-upload
              ref="upload"
              class="fks-upload"
              :action="uploadUrl"
              drag
              name="file"
              :headers="{
                'Fawkes-Auth': ACESS_TOKEN
              }"
              :with-credentials="true"
              :auto-upload="false"
              :limit="1"
              accept=".zip"
              :file-list="fileList"
              :http-request="importPermission"
            >
              <i class="fks-icon-upload upload-iocn" />
              <div class="drag-file">
                {{ LANG.DRAG_FILE }}
              </div>
              <div class="zip-info">
                {{ LANG.SUPPORT_ZIP }}
              </div>
            </fks-upload>
          </div>
          <div class="btn-box2">
            <fks-button icon="fks-icon-turn-right" @click="cancel">
              <span>{{ LANG.CANCEL }}</span>
            </fks-button>
            <fks-button type="primary" icon="fks-icon-check" @click="submit">
              <span>{{ LANG.DETERMINE }}</span>
            </fks-button>
          </div>
        </div>
      </fks-col>
    </fks-row>
  </div>
</template>
<script>
import Mix from '@/mixins/module'
import * as Permission from './api'
export default {
  name: 'License',
  mixins: [Mix],
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      tableData: {
        extra: {
          licenseCode: '',
          cpuSerial: '',
          snCode: ''
          // clientId: '',
          // hostInfoList: [{}]
        },
        notBefore: '',
        notAfter: ''
      },
      form: {},
      uploadUrl: '',
      ACESS_TOKEN: this.$storage.get('access_token'),
      fileList: [],
      isUpdate: false //是否更新许可
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    //获取系统许可信息
    getData() {
      Permission.getData()
        .then((res) => {
          if (res.data) {
            this.tableData = res.data
          }
        })
        .catch((err) => {})
    },
    //上传许可文件
    importPermission(params) {
      // 根据后台需求数据格式
      let form = new FormData()
      // 文件对象
      form.append('file', params.file)
      Permission.upload(form)
        .then((res) => {
          if (res.data.size == 4) {
            this.$message.success(this.LANG.UPLOAD_SUCCESS)
            this.getData()
          } else {
            this.$message.error(this.LANG.UPLOAD_FAILED)
          }
        })
        .catch((err) => {})
    },
    //提交
    submit() {
      this.$message.warning(this.LANG.UPLOADING)
      this.$refs.upload.submit()
      this.isUpdate = false
    },
    //取消
    cancel() {
      this.$refs.upload.clearFiles()
      this.isUpdate = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .fks-input__inner {
    border: none;
    text-align: right;
    background-color: #f1f2f6;
  }

  .fks-upload-dragger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 560px;
    height: 240px;
    background-color: #f9f9f9;
  }
}

.permission-box {
  min-width: 720px;

  .main-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 104px;
  }

  .info-img {
    margin-bottom: 36px;
  }

  .title {
    margin-bottom: 36px;
    font-size: 16px;
    color: #555;
  }

  .input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 474px;
    height: 36px;
    padding-left: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background-color: #f1f2f6;
    opacity: 0.8;
    font-size: 14px;
    color: #555;

    .input-label {
      min-width: 120px;
    }
    .input-content {
      padding: 0 12px 0 16px;
    }
  }

  .btn-box1 {
    display: flex;
    justify-content: center;
    margin: 20px 0 36px;
  }

  // 许可更新
  .update-box {
    .upload-iocn {
      margin-top: 0;
      color: #027aff;
    }

    .drag-file {
      margin-bottom: 8px;
      font-size: 14px;
      color: #555;
    }

    .zip-info {
      font-size: 12px;
      color: #999;
    }
  }

  .btn-box2 {
    margin: 52px 0 36px;
  }
}
</style>